<template>
    <div class="leave-manage">
        <div class="query-form">
            <el-form ref="queryFormRef" inline :model="queryForm">
                <el-form-item label="审批状态:" prop="applyState">
                    <el-select v-model="queryForm.applyState">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option :value="1" :label="ApplyState[1]"></el-option>
                        <el-option :value="2" :label="ApplyState[2]"></el-option>
                        <el-option :value="3" :label="ApplyState[3]"></el-option>
                        <el-option :value="4" :label="ApplyState[4]"></el-option>
                        <el-option :value="5" :label="ApplyState[5]"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getApplytList" type="primary">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button @click="add()" type="primary" v-HasPermission="'dept-create'">申请休假</el-button>
            </div>
            <el-table :data="tableData.data" style="width:100%;">
                <el-table-column type="selection" width="55" />
                <el-table-column v-for="item in tableData.columns" :key="item.prop" :prop="item.prop"
                    :label="item.label" :width="item.width">
                    <template #default="scope" v-if="item.render">
                        <span>{{item.render ? item.render(scope.row,scope.column) : ''}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template #default="scope">
                        <el-button @click="edit(scope.row)">查看</el-button>
                        <el-button v-if="[1,2].includes(scope.row.applyState)" type="danger"
                            @click="singleRemove(scope.row.id)">
                            作废
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :page="(tableData.page as Page)" @change-size="changeSize" />
        </div>
        <!-- 申请休假与查看-->
        <leave-form-dialog :leaveFormData="formData.leaveFormData" :show="show" :title="formData.title" @close="close"
            @submit="submit">
        </leave-form-dialog>
        <apply-info :show="detailData.show" :data="detailData.data" @close="detailClose" :title="detailData.title">
        </apply-info>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance } from "element-plus"
import { Columns, Page } from "@/interface/common"
import useCurrentInstance from "@/hook/useCurrentInstance"
import { ApplyState, ApplyType } from "@/utils/enum"
import { applyList, applyCreate, applyDelete, applyEdit } from "@/api/leave"
import Pagination from "@/components/Pagination.vue"
import leaveFormDialog from './template/leaveForm.vue'
import applyInfo from './template/applyInfo.vue'
import utils from "@/utils/utils.js"

onMounted(() => {
    getApplytList()
})
// 查询条件
const queryFormRef = ref<FormInstance>()
const queryForm = reactive({
    applyState: 0
})
const reset = () => {
    queryFormRef!.value?.resetFields()
}
// 列表
const tableData = reactive<Columns>({
    data: [],
    columns: [
        {
            label: "单号",
            prop: "orderNo",
            align: "center",
            width: 130
        },
        {
            label: '休假时间',
            prop: '',
            width: 200,
            render: (row, column) => {
                return utils.formateDate(new Date(row.startTime), 'yyyy-MM-dd') + '到' +
                    utils.formateDate(new Date(row.endTime), 'yyyy-MM-dd')
            }
        },
        {
            label: '休假时间',
            prop: 'leaveTime'
        },
        {
            label: '休假类型',
            prop: 'applyType',
            render: (row, column) => {
                return ApplyType[row.applyType]
            }
        },
        {
            label: '休假原因',
            prop: 'reason',
        },
        {
            label: '申请时间',
            prop: 'createTime',
            width: 170,
            render: (row, column) => {
                return utils.formateDate(new Date(row.createTime))
            }
        },
        {
            label: '审批人',
            prop: 'auditUser'
        },
        {
            label: '当前审批人',
            prop: 'curAuditUserName',
            width: 100
        },
        {
            label: '审批状态',
            prop: 'applyState',
            render: (row, column) => {
                return ApplyState[row.applyState]
            }
        }
    ],
    page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    }
})
// 获取列表数据
const getApplytList = async () => {
    try {
        const { list, page } = await applyList()
        console.log("获取得到数据", list, page)
        tableData.data = list
        tableData.page = page
    } catch (error) {
        console.error(error)
    }
}
// 页码变化
const changeSize = (num: number) => {
    tableData.page!.pageNum = num
    getApplytList()
}

// 申请休假
const show = ref(false)
const formData = reactive({
    title: '创建菜单',
    leaveFormData: {}
})
// 查看
const detailData = reactive({
    show: false,
    title: '查看',
    data: {}
})
// 申请休假
const add = () => {
    formData.title = "申请休假"
    show.value = true
}
// 查看
const edit = (row) => {
    console.log("数据", row)
    detailData.title = "查看"
    detailData.data = Object.assign({}, row, {
        time: utils.formateDate(new Date(row.startTime), 'yyyy-MM-dd') + '到' +
            utils.formateDate(new Date(row.endTime), 'yyyy-MM-dd')
    })
    detailData.show = true
}
const detailClose = () => {
    detailData.show = false
}
// 作废
const singleRemove = async (id: string) => {
    console.log("作废")
    await applyDelete(id)
    that.$message.success("休假作废成功")
    getApplytList()
}
const { globalProperties: that } = useCurrentInstance()
const submit = async (data) => {
    console.log("提交表单数据", data)
    await applyCreate()
    that.$message.success("创建成功")
    getApplytList()
    return
}
const close = () => {
    show.value = false
}
</script>
<style lang='scss' scoped>
.leave-manage {
    width: 100%;
}
</style>